<template>
    <div class="playe">
        <el-dialog :visible.sync="dialogVisible" width="40%" @close="closed" :title="myTitle"
                   :close-on-click-modal="false" :close-on-press-escape="false">
            <div class="hello-ezuikit-js" style="height:420px;">
                <div
                        :element-loading-text="loadingText"
                        :element-loading-spinner="loadingicon"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        v-loading="loading"
                        id="parent0"
                        style="width: 100%;height: 100%">
                    <img style="width:100%;" :src="groupImgWEB" alt="">
                </div>
            </div>
            <template slot="footer">
                <el-button size="small" type="primary" @click="reload">重新加载</el-button>
                <el-button size="small" @click="closed">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>

    import APIURL from "../utils/ipconfig";

    export default {
        data() {
            return {
                //企业id
                enterpriseId: this.$store.state.user.company,
                //图片存储
                groupImgWEB: '',
                //加载文字
                loadingText: '数据加载中，请稍后',
                //加载图标
                loadingicon: 'el-icon-loading',
                //加载标注
                loading: true,
                //websocket实例
                websocketNow: '',
                //播放弹窗标志
                dialogVisible: false,
                //弹窗标题
                myTitle: '',
                //暂存字段
                player: '',
                //接受的websocket所需参数
                dataForm: {
                    id: '',
                },
                //断开用的uuid
                UUIDIN: '',
            }
        },
        computed: {},
        mounted() {
            this.myTitle = "视频预览"
            console.group('mounted 组件挂载完毕状态===============》')
            // //console.log("player",player);
            // setTimeout(()=>{
            //   player.stop(); // 方法调用示例，10秒后关闭视频
            // },10000)
            // var parent0 = document.getElementById("parent0")
            // parent0.innerHTML = '<video style="width: 100%;height: 100%" id="myid0" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto"> <source ref="previewSource0" type="application/x-mpegURL" src=""> </video>'
        },
        methods: {
            //重新加载
            reload() {
                this.$message.success('重新加载成功，请稍后.......')
                this.groupImgWEB = ''
                if (this.websocketNow) {
                    console.log('主动断开');
                    this.websocketNow.close();
                    this.websocketNow = null
                    this.loading = true
                }
                this.createWebSocket()
            },
            //初始化连接
            init() {
                this.dialogVisible = true
                this.createWebSocket()
            },
            //连接关闭
            closed() {
                let that = this
                this.dialogVisible = false
                this.groupImgWEB = ''
                this.loading = true
                if (this.websocketNow) {
                    console.log('主动断开');
                    this.websocketNow.close();
                    this.websocketNow = null
                }
                this.$axios({
                    method: 'post',
                    url: APIURL.Base_API_URL_CLOSE + '/ffmpeg/closeWebsocket',
                    headers: {
                        'Accept': '*/*',
                        'token': that.$store.state.user.token, //设置token 其中K名要和后端协调好
                    },
                    data: {
                        code: that.UUIDIN
                    }
                })
            },
            //第一部分 WebSocket
            createWebSocket() {
                var vue = this
                try {
                    //尝试连接
                    this.websocketNow = new WebSocket(APIURL.Base_API_URL_WEBSOCKET_VIDEO + "/ffmpeg/websocket/video/replay")
                    this.initWebSocket();
                } catch (e) {
                    console.log(e);
                }
            },
            // 初始化weosocket
            initWebSocket() {
                this.websocketNow.onopen = this.websocketonopen;
                this.websocketNow.onerror = this.websocketonerror;
                this.websocketNow.onmessage = this.websocketonmessage;
                this.websocketNow.onclose = this.websocketclose;
            },
            //连接成功提示字样
            websocketonopen() {
                console.log('连接成功');
                this.websocketsend()
            },
            //连接错误
            websocketonerror(e) {
                console.log(e);
            },
            //数据接收
            websocketonmessage(e) {
                let res = JSON.parse(e.data)
                if (res.image) {
                    this.loading = false
                    this.$nextTick(() => {
                        this.groupImgWEB = "data:" + ';base64,' + res.image
                    })
                }
                if (res.code) {
                    this.UUIDIN = res.code
                }
            },
            //数据发送
            websocketsend() {
                this.$message('数据加载中，请稍后')
                let parmas = {
                    rtspUrl: this.dataForm.devicesRtspAddress || this.dataForm.rtspAdd || ''
                }
                console.log(parmas)
                this.websocketNow.send(JSON.stringify(parmas));
            },
            //服务关闭
            websocketclose(e) {
                console.log("connection closed ");
            },
            //真正的关闭
            websocketcloses() {
                this.websocketNow.close()
            },
        },
        //销毁前
        beforeDestroy() {
            this.groupImgWEB = ''
            if (this.websocketNow) {
                console.log('主动断开');
                this.websocketNow.close();
                this.websocketNow = null
                this.loading = true
            }
        },
        //销毁
        destroyed() {
            this.groupImgWEB = ''
            if (this.websocketNow) {
                console.log('主动断开');
                this.websocketNow.close();
                this.websocketNow = null
                this.loading = true
            }
        }
    }
</script>
<style lang="scss">
    .el-dialog {
        margin-top: 8vh !important;
    }
</style>
